<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
		<script src="../JS/register_value_01.js"></script>
		<link rel="stylesheet" href="../CSS/register_componments.css" />
	</head>
	<body>
		<div class="register-container">
			<h2>注册</h2>
			<form action="" method="post">
				<div class="form-group">
					<label for="username1">姓名:</label>
					<input type="text" id="name" value="请输入您要设置的用户名" onkeydown="validateInput(event)" required />
				</div>
				<div class="form-group">
					<label for="password1">密码:</label>
					<input type="password" id="password1" onkeydown="validatePassword(event)"
						required />
					<button type="button" id="toggleButton" onclick="togglePasswordVisibility()">显示密码</button>
				</div>
				<div class="form-group">
					<label for="confirmPassword">确认密码:</label>
					<input type="password" id="confirmPassword"  onkeydown="validatePassword(event) />
					<button type=" button" class="toggleButton" onclick="togglePasswordVisibility()">显示密码</button>
				</div>
				<div class="form-group">
					<label for="phoneNumber">手机号:</label>
					<input type="number" id="phoneNumber" value="请输入您的手机号码" />
				</div>
				<div class="form-group">
					<label for="email">电子邮箱:</label>
					<input type="email" id="email" value="请输入您的电子邮箱" />
				</div>
				<div class="form-group">
					<label for="zone">国家/地区:</label>
					<select id="countrySelect" name="country">
						<option value="">加载中，请稍等...</option>
					</select>
				</div>
				<div class="form-group">
					<label for="loginDate">注册日期:</label>
					<input type="datetime" name="" id="loginDate" value="请选择您的注册日期" />
				</div>
				<div>
					<input type="submit" value="注册完成" class="btn-login" onclick="register()"/>
				</div>
				<div>
					<input type="reset" value="重新注册" class="btn-login" />
				</div>
				<div>
					<button class="btn-login"><a href="../index.html">返回上一页</a></button>
				</div>
				<div>
					<button class="btn-login"><a href="../index.html">返回首页</a></button>
				</div>
			</form>
			<p>密码长度必须在8到16位之间，且只能包含字母、数字和符号。</p>
			<div class="login-link">
				已有账户? <a href="./login.html">登录</a>
			</div>
		</div>
		<script>
			function register() {
				const name = document.getElementById('name').value;
				const password1 = document.getElementById('password1').value;
				const confirmPassword = document.getElementById('confirmPassword').value;
				const phoneNumber = document.getElementById('phoneNumber').value;
				const email = document.getElementById('email').value;

				if (password1 !== confirmPassword) {
					alert('密码和确认密码不一致');
					return;
				}

				if (password1.length < 8 || password1.length > 16) {
					alert('密码长度必须在8到16位之间');
					return;
				}

				if (!password1.match(/^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$%^&*]).{8,16}))
				)) {
					alert('密码必须包含字母、数字和符号');
					return;
				}
				const data = {
					name: name,
					password1: password1,
					confirmPassword: confirmPassword,
					phoneNumber: phoneNumber,
					email: email
				};
				// 使用fetch API进行异步注册请求
				fetch('http://localhost:8080/api/register', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json'
					},
					body: JSON.stringify(data)
				})
						.then(response => response.json())
						.then(data => {
							if (data.code === 201) {
								alert('注册成功');
								// 这里可以添加一些注册成功后的操作，例如跳转到登录页面
							} else {
								alert('注册失败：' + data.message);
							}
						})
						.catch(error => {
							alert('请求失败：' + error);
						});
			}
		</script>
	</body>
</html>